<template>
	<div class="auto-send-config">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>自动发送配置</span>
				</div>
			</template>
			
			<!-- 生日祝福配置 -->
			<div class="config-section">
				<h3>生日祝福</h3>
				<el-form :model="birthdayConfig" label-width="120px">
					<el-form-item label="开启生日祝福">
						<el-switch v-model="birthdayConfig.enabled" />
					</el-form-item>
					<el-form-item label="发送时间">
						<el-time-picker v-model="birthdayConfig.sendTime" format="HH:mm" placeholder="选择发送时间" />
					</el-form-item>
					<!-- <el-form-item label="提前发送天数">
						<el-input-number v-model="birthdayConfig.daysInAdvance" :min="0" :max="7" />
					</el-form-item> -->
					<el-form-item label="短信模板">
						<el-select v-model="birthdayConfig.templateId" placeholder="请选择生日祝福模板">
							<el-option v-for="template in birthdayTemplates" :key="template.id" :label="template.name" :value="template.id" />
						</el-select>
					</el-form-item>
				</el-form>
			</div>

			<!-- 节日祝福配置 -->
			<div class="config-section">
				<h3>节日祝福</h3>
				<el-form :model="holidayConfig" label-width="120px">
					<el-form-item label="开启节日祝福">
						<el-switch v-model="holidayConfig.enabled" />
					</el-form-item>
					<el-form-item label="发送时间">
						<el-time-picker v-model="holidayConfig.sendTime" format="HH:mm" placeholder="选择发送时间" />
					</el-form-item>
				</el-form>

				<!-- 节日列表 -->
				<div class="holiday-list">
					<div class="holiday-header">
						<h4>节日列表</h4>
						<el-button type="primary" size="small" @click="handleAddHoliday">添加节日</el-button>
					</div>
					<el-table :data="holidayConfig.holidays" border style="width: 100%">
						<el-table-column prop="name" label="节日名称" width="150" />
						<el-table-column prop="date" label="节日日期" width="150">
							<template #default="{ row }">
								{{ row.month }}-{{ row.day }}
							</template>
						</el-table-column>
						<el-table-column prop="templateId" label="短信模板" show-overflow-tooltip>
							<template #default="{ row }">
								{{ getTemplateName(row.templateId) }}
							</template>
						</el-table-column>
						<el-table-column label="操作" width="150" align="center">
							<template #default="{ row }">
								<el-button type="primary" size="small" @click="handleEditHoliday(row)">编辑</el-button>
								<el-button type="danger" size="small" @click="handleDeleteHoliday(row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>

			<!-- 保存按钮 -->
			<div class="config-footer">
				<el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
			</div>
		</el-card>

		<!-- 节日编辑弹窗 -->
		<el-dialog :title="holidayDialogTitle" v-model="holidayDialogVisible" width="500px">
			<el-form :model="holidayForm" label-width="100px">
				<el-form-item label="节日名称" required>
					<el-input v-model="holidayForm.name" placeholder="请输入节日名称" />
				</el-form-item>
				<el-form-item label="节日日期" required>
					<el-row :gutter="10">
						<el-col :span="11">
							<el-select v-model="holidayForm.month" placeholder="月份">
								<el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
							</el-select>
						</el-col>
						<el-col :span="11">
							<el-select v-model="holidayForm.day" placeholder="日期">
								<el-option v-for="d in 31" :key="d" :label="d + '日'" :value="d" />
							</el-select>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item label="短信模板" required>
					<el-select v-model="holidayForm.templateId" placeholder="请选择短信模板">
						<el-option v-for="template in holidayTemplates" :key="template.id" :label="template.name" :value="template.id" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="holidayDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleSaveHoliday">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="autoSendConfig">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 生日祝福配置
const birthdayConfig = reactive({
	enabled: false,
	sendTime: new Date(2024, 0, 1, 9, 0),
	daysInAdvance: 0,
	templateId: ''
});

// 节日祝福配置
const holidayConfig = reactive({
	enabled: false,
	sendTime: new Date(2024, 0, 1, 9, 0),
	holidays: []
});

// 模板列表
const birthdayTemplates = ref([]);
const holidayTemplates = ref([]);

// 获取模板列表
const getTemplateList = () => {
	// 这里调用获取模板列表的API
	setTimeout(() => {
		birthdayTemplates.value = [
			{ id: 1, name: '生日祝福模板1', content: '亲爱的${name}，祝您生日快乐！' }
		];
		holidayTemplates.value = [
			{ id: 2, name: '新年祝福模板', content: '亲爱的${name}，新年快乐！' }
		];
	}, 500);
};

// 初始化数据
getTemplateList();

// 节日弹窗相关
const holidayDialogVisible = ref(false);
const holidayDialogTitle = ref('添加节日');
const holidayForm = reactive({
	name: '',
	month: undefined,
	day: undefined,
	templateId: ''
});

// 添加节日
const handleAddHoliday = () => {
	holidayDialogTitle.value = '添加节日';
	Object.assign(holidayForm, {
		name: '',
		month: undefined,
		day: undefined,
		templateId: ''
	});
	holidayDialogVisible.value = true;
};

// 编辑节日
const handleEditHoliday = (row) => {
	holidayDialogTitle.value = '编辑节日';
	Object.assign(holidayForm, row);
	holidayDialogVisible.value = true;
};

// 删除节日
const handleDeleteHoliday = (row) => {
	const index = holidayConfig.holidays.findIndex(h => h === row);
	if (index !== -1) {
		holidayConfig.holidays.splice(index, 1);
		ElMessage.success('删除成功');
	}
};

// 保存节日
const handleSaveHoliday = () => {
	if (!holidayForm.name || !holidayForm.month || !holidayForm.day || !holidayForm.templateId) {
		ElMessage.warning('请填写完整信息');
		return;
	}

	const holiday = { ...holidayForm };
	const index = holidayConfig.holidays.findIndex(h => h.name === holiday.name);
	if (index !== -1) {
		holidayConfig.holidays[index] = holiday;
	} else {
		holidayConfig.holidays.push(holiday);
	}

	holidayDialogVisible.value = false;
	ElMessage.success('保存成功');
};

// 获取模板名称
const getTemplateName = (templateId) => {
	const template = holidayTemplates.value.find(t => t.id === templateId);
	return template ? template.name : '';
};

// 保存配置
const handleSaveConfig = () => {
	// 这里调用保存配置的API
	setTimeout(() => {
		ElMessage.success('配置保存成功');
	}, 500);
};
</script>

<style scoped lang="scss">
.auto-send-config {
	.config-section {
		margin-bottom: 30px;

		h3 {
			margin-bottom: 20px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
		}
	}

	.holiday-list {
		margin-top: 20px;

		.holiday-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			h4 {
				margin: 0;
			}
		}
	}

	.config-footer {
		margin-top: 30px;
		text-align: center;
	}
}
</style>